<template>
    <footer>
        <div class="top">
            <div class="top-content">
                <div class="other-detail">
                    <p class="other-detail-info">联系地址：山东省济南市槐荫区腊山河东路1799号</p>
                    <p class="other-detail-info">联系电话：0531-81602235</p>
                    <p class="other-detail-info">交通指南:
                        <span>1、乘133路到省会文化艺术中心站下车，北行218米。</span>
                        <span>2、乘19路、K167到齐州路兴福寺路站下车，向东1018米。</span>
                        <span>3、乘K156、K157、K58到济南西站公交枢纽站下车，向东1500米 。</span>
                    </p>
                    <p class="other-detail-info-link">
                        <a target="_blank">馆院概况</a> |
                        <a target="_blank">馆院简讯</a>
                        |
                        <a target="_blank">展览展讯</a> |
                        <a target="_blank">画院联盟</a> |
                        <a target="_blank">典藏鉴赏</a> |
                        <a target="_blank">艺术教育</a> |
                        <a target="_blank">参观服务</a>
                    </p>
                </div>
                <div class="friendship">
                    <div class="friendship-title">友情链接</div>
                    <div class="friendship-content">
                        <a href="https://www.namoc.org/" target="_blank">中国美术馆</a>
                        <a href="http://www.sdam.org.cn/" target="_blank">山东省美术馆</a>
                        <a href="https://www.namoc.org/" target="_blank">中国美术馆</a>
                    </div>
                    <div class="other-link">
                        <div class="other-link-item">
                            <el-icon class="icon-item">
                                <ChatDotRound style="font-size: 1.75rem;color: aliceblue;"/>
                            </el-icon>
                        </div>
                        <div class="other-link-item">
                            <el-icon class="icon-item">
                                <Message style="font-size: 1.75rem;color: aliceblue;"/>
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <a href="https://beian.miit.gov.cn" target="_blank">
                转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源，服务协议隐私政策鲁ICP备2025149128号</a>
        </div>
    </footer>
</template>

<script setup>
import { ChatDotRound, Message } from '@element-plus/icons-vue'
</script>

<style lang="scss">
@import '../assets/css/public/footer.css';

.other-link {
    display: flex;
    gap: 20px;
    /* 图标之间的间距 */
}

.other-link-item {
    cursor: pointer;
    padding: 10px;
    transition: all 0.3s ease;
}

.icon-item {
    font-size: 25px;
    /* 调整图标大小 */
    color: #ffffff;
    /* 图标颜色 */
}

/* 悬停效果 */
.other-link-item:hover .icon-item {
    

    transform: scale(1.1);
}

.bottom {
    a {
        color: inherit;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}
</style>